<template>
	<view class="page">
		<view class="list flex_center" v-for="(item,index) in list" :key="index" @click="$util.toUrl(`/pages/circle/guilddetail?circle_id=${circle_id}&id=${item.id}`)">
			<view class="left flex_center">
				<view class="image">
					<image :src="item.logo" mode="aspectFill"></image>
				</view>
				
				<view class="text">
					<view class="hidden">{{ item.guild_name }}</view>
					<text>公会ID:{{ item.id }}</text>
				</view>
			</view>
			
			<view class="right flex_center">
				<view class="btn accept flex_r_around" @click.stop="beforeAccept(item)">
					<text>拒绝</text>
				</view>
				<view class="btn agree flex_r_around" @click.stop="onAgree(item)">
					<text>同意</text>
				</view>
			</view>
		</view>
		
		<u-popup :show="show" @close="show = false" mode="center" round="40rpx">
			<view class="modal">
				<view class="modal_title flex_r_between">
					<text>拒绝原因</text>
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="show = false"></u-icon>
				</view>
		
				<view class="modal_textarea">
					<textarea placeholder="请输入" placeholder-class="input-placeholder" v-model="check_remark"></textarea>
				</view>
		
				<view class="modal_btn flex_r_around" @click="onAccept">
					<text>确定</text>
				</view>
		
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				total: 1,
				
				show: false,
				check_remark: '',
				id: 0,
			}
		},
		name: 'guild',
		props: {
			circle_id: {
				type: Number,
				default: 0,
			}
		},
		methods: {
			refList(){
				this.list = [];
				this.total = 1;
				this.page = 1;
				this.getList();
			},
			
			getList() {
				this.$get('/circle.guild/getGuildePendingReviewList', {
					circle_id: this.circle_id,
					page: this.page
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				})
			},
			
			onReach() {
				if (this.total > this.list.length) {
					this.page++;
					this.getList();
				}
			},
			
			onAgree(item) {
				this.$post('/circle.guild/setReviewStatus', {
					status: 2,
					circle_id: this.circle_id,
					guild_id: item.id,
				}).then(res => {
					this.$util.msg(res.msg);
					this.refList();
				})
			},
			
			beforeAccept(item) {
				this.id = item.id;
				this.show = true;
			},
			
			onAccept() {
				this.$post('/circle.guild/setReviewStatus', {
					status: 3,
					circle_id: this.circle_id,
					guild_id: this.id,
					check_remark: this.check_remark
				}).then(res => {
					this.show = false;
					this.$util.msg(res.msg);
					this.refList();
				})
			},
		},
		
		created() {
			this.getList();
		},
	}
</script>

<style lang="less" scoped>
	.list {
		padding: 24rpx 32rpx;
		overflow: hidden;
		
		.left {
			overflow: hidden;
			flex: 1;
			.image {
				width: 128rpx;
				height: 128rpx;
				background: #D8D8D8;
				border-radius: 24rpx;
				overflow: hidden;
				margin-right: 16rpx;
				image {
					width: 128rpx;
					height: 128rpx;
				}
			}
			
			.text {
				overflow: hidden;
				flex: 1;
				view {
					font-weight: 500;
					font-size: 32rpx;
					color: #131313;
					line-height: 32rpx;
				}
				
				text {
					font-size: 24rpx;
					color: #666666;
				}
			}
		}
	
		.right {
			.btn {
				width: 96rpx;
				height: 40rpx;
				border-radius: 20rpx;
				margin-left: 16rpx;
		
				text {
					font-size: 24rpx;
				}
			}
		
			.agree {
				border: 2rpx solid #1FC129;
		
				text {
					color: #1FC129;
				}
			}
		
			.accept {
				border: 2rpx solid #FD2A53;
		
				text {
					color: #FD2A53;
				}
			}
		}
	
	}
	
	.modal {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 34rpx 16rpx 38rpx 32rpx;
	
		.modal_title {
			text {
				font-weight: 500;
				font-size: 36rpx;
				color: #131313;
				line-height: 50rpx;
			}
		}
	
		.modal_textarea {
			width: 552rpx;
			height: 208rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			padding: 24rpx;
			margin: 32rpx 0;
			overflow: hidden;
	
			textarea {
				font-size: 28rpx;
				color: #333;
				line-height: 36rpx;
			}
		}
	
		.modal_btn {
			width: 320rpx;
			height: 88rpx;
			background: #FD2A53;
			border-radius: 44rpx;
			margin: 0 auto;
	
			text {
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	
	}

</style>
